<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>批量导入tao营销费用数据 - 财务管理 - 电商ERP系统</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;">
    <style type="text/css">
        .update {
            display: inline-block;
            margin-left: 15px;
            padding: 0 20px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            background: #009789;
            color: #fff;
            text-align: center;
            border-radius: 3px;
            cursor: pointer;
        }

        .update i {
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
            width: 30px;
            height: 30px;
            background: url();
        }
    </style>


    <!-- content starts -->
    <blockquote class="layui-elem-quote">批量导入tao营销费用数据</blockquote>

    <fieldset class="layui-elem-field">
        <legend></legend>
        <div class="layui-field-box">
            <div class="layui-form-item" id="import_order">
                <form class="layui-form">
                <div class="layui-input-inline">
                    <select name="shopId" id="shopId">
                        <option value="">店铺</option>
                        <option th:each="item: ${shops}" th:text="${item.name}" th:value="${item.id}"></option>
                    </select>
                </div>
                    <div class="layui-input-inline">
                        <select name="source" id="source">
                            <option value="">费用来源</option>
                            <option value="直通车">直通车</option>
                            <option value="引力魔方">引力魔方</option>
                            <option value="万相台">万相台</option>
                            <option value="极速推">极速推</option>
                        </select>
                    </div>
                </form>
                <div class="layui-inline">
                    <form method="post" enctype="multipart/form-data" id="execl_form">
                        <input type="file" name="excel" id="excel" placeholder="" class="layui-input">
                    </form>
                </div>

                <div class="layui-inline">
                    <button type="button" id="excel_upload_btn" class="layui-btn layui-btn-primary">导入结算数据
                    </button>
                    <span id="excel_upload_btn_" style="display: none;" class="update"><i></i>导入中</span>
                </div>
            </div>

            <div class="layui-form-item">
                <form class="layui-form ">
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-normal" id="excel_import">保存选中<span
                                id="selectedNum">(0)</span></button>
                        <span id="excel_import_" style="display: none;" class="update"><i></i>保存中</span>
                    </div>
                    <div class="layui-inline">
                        <a href="JavaScript:;" style="color: red;font-size: large;">总共找到：<i id="orderCount">[[${orderCount}]]</i>个订单</a>
                        excel中找到：<span id="orderItemRows"></span>条数据
                    </div>

                </form>
            </div>
        </div>
    </fieldset>

    <!-- start dd-wrapper -->
    <link rel="stylesheet" href="/goods/order.css"/>
    <div class="dd-wrapper">
        <table class="dd-table">
            <tr>
                <th><input id="allCheck" type="checkbox"/>序号</th>
                <th>记账时间</th>
                <th>交易日期</th>
                <th>交易金额</th>
                <th>流水类型</th>
                <th>资金类型</th>
                <th>余额</th>
                <th>来源</th>
                <th>摘要</th>
            </tr>
            <tbody id="order_list">

            </tbody>
        </table>
    </div>
    <!-- end dd-wrapper -->


    <script type="text/javascript" src="/goods/Tips/Tips.min.js"></script>
    <script type="text/javascript">
        var layer;
        var $;
        var windowOpen;
        var orderList;

        layui.use(['jquery', 'form', 'layer'], function () {

            $ = layui.jquery;
            var form = layui.form;
            layer = layui.layer;

            $(function () {
                $("#shopId").val('[[${shopId}]]');
                form.render('select'); //刷新select选择框渲染


                //AJAX 上传订单excel
                $("#excel_upload_btn").click(function () {
                    var shopId = $("#shopId").val();
                    var source = $("#source").val();
                    if(shopId === '' || shopId ===0 ){
                        alert("请选择店铺");
                        return  false;
                    }
                    if(source === ''){
                        alert("请选择费用类型");
                        return false;
                    }
                    var excel = $("#excel").val();
                    if (excel == '') {
                        alert("请选择文件");
                        return false;
                    } else if (excel.lastIndexOf(".xls") < 0 ) {//可判断以.xls和.xlsx结尾的excel
                        alert("只能上传xls文件,请将文件转换成xls格式");
                    } else {
                        var url = "/shop/marketing_costs_list_tao_import_ajax";
                        // var formData = new FormData($('#execl_form')[0]);

                        var formData = new FormData();
                        formData.append("excel", document.getElementById("excel").files[0]);
                        formData.append("source",source);
                        formData.append("shopId",shopId);

                        $(this).hide();
                        $("#excel_upload_btn_").show();
                        $.ajax({
                            url: url,
                            type: "post",
                            data: formData,
                            success: function (result) {
                                $("#excel_upload_btn_").hide();
                                $("#excel_upload_btn").show();
                                // console.log(result);
                                if (result.code == 0) {
                                    orderList = result.data;
                                    $("#orderCount").text(result.data.length);
                                    alert("excel上传成功，找到" + result.data.length + '条记录');

                                    //循环加入数据到视图
                                    var orderListHtml = "";
                                    $("#order_list").html("");
                                    // console.log(result.data);

                                    $(result.data).each(function (i, d) {
                                        var trHtml = '<tr>';
                                        trHtml += '<td><input type="checkbox" class="currCheck" name="orderNo" value="' + d.id + '" />' + d.id + '</td>'
                                        trHtml += '<td>' + d.datetime + '</td>'
                                        trHtml += '<td>' + d.date + '</td>'
                                        trHtml += '<td>' + d.amount + '</td>'
                                        trHtml += '<td>' + (d.type == 1 ? "支出" : "收入") + '</td>'
                                        trHtml += '<td>' + d.transactionType + '</td>'
                                        trHtml += '<td>' + d.balance + '</td>'
                                        trHtml += '<td>' + d.source + '</td>'
                                        trHtml += '<td>' + d.remark + '</td>'
                                        trHtml += '</tr>';

                                        orderListHtml += trHtml;
                                    })
                                    $("#order_list").html(orderListHtml);
                                    $("#import_order").hide()
                        
                                    // $("#orderItemRows").text(rows);
                                } else {
                                    alert("更新失败:" + result.msg);
                                }

                                // alert(JSON.stringify(result));
                                return false;
                            },
                            error: function () {
                                alert("excel上传失败");
                            },
                            cache: false,
                            contentType: false,
                            processData: false
                        });
                    }

                    return false;
                })



                //批量导入
                $("#excel_import").click(function () {
                    var orderNos = [];
                    var importOrderList = [];//选中的导入订单
                
                    $("input[name^='orderNo']").each(function (i, el) {
                        var a = false;
                        if ($(this).is(':checked')) {
                            var selectOrderNo = $(this).val();
                            orderNos.push(selectOrderNo);
                            orderList.filter(function (p) {
                                if (p.id == selectOrderNo) {
            
                                    importOrderList.push(p);
                                }
                            });
                            if (a) {
                                return false;
                            }
                        }
                    });
                    //console.log(orderNos);
                    if (orderNos.length == 0) {
                        alert("请选择订单");
                    } else {

                        $("#excel_import_").show();
                        $("#excel_import").hide();
                        $.ajax({
                            url: "/funds/marketing_costs_list_tao_import_submit",
                            type: "post",
                            dataType: "JSON",
                            contentType: 'application/json',
                            data: JSON.stringify({shopId:'[[${shopId}]]',source:$("#source").val(),list:importOrderList}),
                            success: function (result) {
                                $("#excel_import_").hide();
                                $("#excel_import").show();
                                // console.log(result);
                                if (result.code == 0) {
                                    alert(result.data);
                                    window.location.href="/funds/marketing_costs_list_tao";
                                    // window.location.reload();
                                } else {
                                    alert("更新失败:" + result.msg);
                                }

                                // alert(JSON.stringify(result));
                                return false;
                            }
                        });
                    }


                })

                $('#allCheck').on('change', function (e) {
                    var checked = $('#allCheck').prop('checked');
                    $('.currCheck').prop('checked', checked);
                    $('#selectedNum').text('(' + getSelectNum() + ')')
                })

                $('#order_list').on('change', '.currCheck', function (e) {
                    for (var i = 0; i < $('.currCheck').length; i++) {
                        var checked = $('.currCheck').eq(i).prop('checked');
                        console.log(checked);
                        if (!checked) {
                            $('#allCheck').prop('checked', false);
                            $('#selectedNum').text('(' + getSelectNum() + ')')
                            return;
                        }
                    }
                    $('#allCheck').prop('checked', true);
                })


                function getSelectNum() {
                    var n = 0;
                    for (var i = 0; i < $('.currCheck').length; i++) {
                        var checked = $('.currCheck').eq(i).prop('checked');
                        if (checked) {
                            n++;
                        }
                    }
                    return n;
                }

            })
        });
    </script>
</div>


</body>
<html>
